const App = {
    data() {
        return {
            size: 24, //L(12/P) M(24/P) S(44/P)
            printing: false,
            data: {title: '标题', specification: '规格', price: '单价', code: '条形码'}
        }
    },
    computed: {
        itemStyle() {
            switch (this.size) {
                case 12:
                    return {fontSize: '20px', width: '50%'};
                case 24:
                    return {fontSize: '16px', width: '33%'};
                default:
                    return {fontSize: '12px', width: '25%'};
            }
        },
        imgStyle() {
            switch (this.size) {
                case 12:
                    return {height: '125px'}
                case 24:
                    return {height: '86px'}
                default:
                    return {height: '56px'}
            }
        }
    },
    methods: {
        print() {
            this.printing = true
            this.$nextTick(() => {
                window.print()
                this.printing = false
            })
        },
        changeSize(number) {
            this.size = number
            this.$nextTick(() => this.createBarcode())
        },
        createBarcode() {
            for (let i = 1; i <= this.size; i++) JsBarcode('#barcode' + i, this.data.code)
        }
    },
    created() {
        window.location.search.substr(1).split('&').map(v => {
            const data = v.split('=')
            this.data[data[0]] = decodeURI(data[1])
        });
        switch (this.data.size) {
            case 'l':
                return this.changeSize(12)
            case 'm':
                return this.changeSize(24)
            case 's':
                return this.changeSize(44)
            default:
                return this.changeSize(24)
        }
    }
}

Vue.createApp(App).mount('#app')